/**
 * leftbar module
 */

// var UsedWidget = require("./UsedWidget");
var consts = require("../../../utils/consts");
import React, {Component} from 'react';
import BUTTONS from '../../../consts/buttons'
import Widgets from './Widgets';
import FixedBtnPlugin from './FixedBtnPlugin';
import WidgetsProvider from '../EditorArea/Plane/WidgetsProvider';
class Leftbar extends Component {
    parseWidgets(obj) {
        const plugins = [];
        for (var item in WidgetsProvider) {
            plugins.push(WidgetsProvider[item]);
        }
        return plugins;
    }
    handleOnAddWidget({...button}) {
        let {selectedPageId, addWidget} = this.props;
        //删除组件static信息（不往后端提交）
        delete button.static;
        addWidget(button, selectedPageId);
    }
    render() {
        const plugins = this.parseWidgets(WidgetsProvider);
        const {showTimeline, showList, setState} = this.props;
        return (
            <div ref="editorLeft" className="Editor-left">
                <div className="left-editor">
                  {
                    plugins.map((plugin) => {
                        const defaultProps = plugin.defaultProps
                        if(!defaultProps){
                            return;
                        }
                        return (
                            <div key={defaultProps.type}>
                              <div data-draggable className="widget-type-drag"  onClick={this.handleOnAddWidget.bind(this, defaultProps)} data-widget-type-click>
                                <div className={defaultProps.icon_class}>
                                  <div>
                                    <img src="/static/idealsee/images/new_editor/editor/disabled_widget.png" className='disabled_widget'/>
                                  </div>
                                </div>
                              </div>
                              <div className="icon_tip">
                                <span>{defaultProps.type_display}</span>
                              </div>
                            </div>
                          )
                      })
                  }
                  <FixedBtnPlugin handleOnAddWidget = {this.handleOnAddWidget}/>
                </div>
                <div className="distimeline">
                    <div>
                        <div className="icon-tuceng" onClick={() => setState({showTimeline: false,showList: !showList})}></div>
                        <div className='icon_tip_tu'>图层</div>
                    </div>
                    <div>
                        <div className="icon-time " onClick={() => setState({showList: true,showTimeline: !showTimeline})}></div>
                        <div className='icon_tip_time'>时间线</div>
                    </div>
                </div>
                <Widgets />
            </div>
        )
    }
}
export default Leftbar;
